<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form</title>
		<link href="../../../dist/css/color-ui.css" rel="stylesheet"/>
		<link href ="../../../vendor/css/font-awesome.min.css" rel="stylesheet"/>
		<link href="../base.css" rel="stylesheet"/>
		<link href="form.css" rel="stylesheet"/>
		<script src="../../../dist/lib/jquery-extend.js"></script>
		<!--[if lt IE 9]>
		<link href="../../../vendor/css/baseIe8.css" rel="stylesheet"/>
		<script src="../../../vendor/js/html5shiv.min.js"></script>
		<script src="../../../vendor/js/respond.min.js"></script>
		<script src="../../../vendor/js/baseIe8.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<h1>表单 Form</h1>
			<h2>基本实例</h2>
			<form>
				<div class="form-group">
					<label class="form-title">用户名</label>
					<input type="text" class="form-control"/>
				</div>
				<div class="form-group">
					<label class="form-title">密码</label>
					<input type="password" class="form-control" placeholder="Password" disabled/>
				</div>
				<div class="form-group">
					<label class="form-title">下拉列表</label>
					<select class="form-control">
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</div>
				<div class="form-group">
					<label class="form-title">选项</label>
					<div class="radio">
						<div class="radio-group">
							<input type="radio" id="disRadio1" name="disRadio"/>
							<label for="disRadio1"></label>
							<label for="disRadio1">Option one is this and that—be sure to include why it's great</label>
						</div>
					</div>
					<div class="radio">
						<div class="radio-group">
							<input type="radio" id="disRadio2" name="disRadio"/>
							<label for="disRadio2"></label>
							<label for="disRadio2">Option two can be something else and selecting it will deselect option one</label>
						</div>
					</div>
					<div class="radio disabled">
						<div class="radio-group">
							<input type="radio" id="disRadio3" name="disRadio" disabled/>
							<label for="disRadio3"></label>
							<label for="disRadio3">Option three is disabled</label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="form-title">文件选择</label>
					<input type="file" />
				</div>
				<div class="form-group">
					<div class="checkbox-group">
						<input type="checkbox" id="checkbox1"/>
						<label for="checkbox1"></label>
						<label for="checkbox1">记住我</label>
					</div>
				</div>
				<div class="form-group">
					<button class="btn btn-default" type="submit">提交</button>
				</div>
			</form>
			<h2>添加额外的图标</h2>
			<form>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon">
							<i class="fa fa-user"></i>
						</span>
						<input type="text" class="form-control" placeholder="用户名"/>
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon">
							<i class="fa fa-key"></i>
						</span>
						<input type="password" class="form-control" placeholder="密码"/>
					</div>
				</div>
			</form>
			<h2>校验状态</h2>
			<form>
				<div class="form-group has-success">
					<label class="form-title">Input with success</label>
					<input type="text" class="form-control"/>
				</div>
				<div class="form-group has-warning">
					<label class="form-title">Input with warning</label>
					<input type="text" class="form-control"/>
				</div>
				<div class="form-group has-error">
					<label class="form-title">Input with error</label>
					<input type="text" class="form-control"/>
				</div>
				<div class="has-success">
					<div class="checkbox">
						<div class="checkbox-group">
							<input type="checkbox" id="checkboxSuccess"/>
							<label for="checkboxSuccess"></label>
							<label for="checkboxSuccess">Checkbox with success</label>
						</div>
					</div>
				</div>
				<div class="has-warning">
					<div class="checkbox">
						<div class="checkbox-group">
							<input type="checkbox" id="checkboxWarning"/>
							<label for="checkboxWarning"></label>
							<label for="checkboxWarning">Checkbox with warning</label>
						</div>
					</div>
				</div>
				<div class="has-error">
					<div class="checkbox">
						<div class="checkbox-group">
							<input type="checkbox" id="checkboxError"/>
							<label for="checkboxError"></label>
							<label for="checkboxError">Checkbox with error</label>
						</div>
					</div>
				</div>
			</form>
			<h2>内联表单</h2>
			<form class="form-inline">
				<div class="form-group">
					<label class="form-title">用户名</label>
					<input type="text" class="form-control"/>
				</div>
				<div class="form-group">
					<label class="form-title">密码</label>
					<input type="password" class="form-control"/>
				</div>
				<div class="form-group">
					<label class="form-title">性别</label>
					<div class="radio radio-inline">
						<div class="radio-group">
							<input type="radio" id="sexRadio1" name="sexRadio"/>
							<label for="sexRadio1"></label>
							<label for="sexRadio1">男</label>
						</div>
					</div>
					<div class="radio radio-inline">
						<div class="radio-group">
							<input type="radio" id="sexRadio2" name="sexRadio"/>
							<label for="sexRadio2"></label>
							<label for="sexRadio2">女</label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<button class="btn btn-default" type="submit">提交</button>
				</div>
			</form>
			<form class="form-inline">
				<div class="form-group">
					<label class="form-title sr-only">用户名</label>
					<input type="text" class="form-control" placeholder="用户名"/>
				</div>
				<div class="form-group">
					<label class="form-title sr-only">密码</label>
					<input type="password" class="form-control" placeholder="密码"/>
				</div>
				<div class="form-group">
					<div class="checkbox-inline">
						<div class="checkbox-group">
							<input type="checkbox" id="checkbox2"/>
							<label for="checkbox2"></label>
							<label for="checkbox2">记住我一周 </label>
						</div>
					</div>
					<div class="checkbox-inline">
						<div class="checkbox-group">
							<input type="checkbox" id="agree"/>
							<label for="agree"></label>
							<label for="agree">同意条款</label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<button class="btn btn-default" type="submit">提交</button>
				</div>
			</form>
			<h2>栅格表单</h2>
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-2 form-title">用户名</label>
					<div class="col-sm-6">
						<input type="text" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 form-title">密码</label>
					<div class="col-sm-6">
						<input type="password" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 form-title">地址</label>
					<div class="col-sm-2">
						<select class="form-control">
							<option>辽宁省</option>
						</select>
					</div>
					<div class="col-sm-2">
						<select class="form-control">
							<option>沈阳市</option>
						</select>
					</div>
					<div class="col-sm-2">
						<select class="form-control">
							<option>浑南新区</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 form-title">地址</label>
					<div class="col-sm-6">
						<p class="form-control-static">辽宁省沈阳市浑南新区</p>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 form-title">备注</label>
					<div class="col-sm-6">
						<textarea class="form-control"></textarea>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-6">
						<div class="checkbox-group">
							<input type="checkbox" id="checkbox3"/>
							<label for="checkbox3"></label>
							<label for="checkbox3">记住我</label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-6">
						<button class="btn btn-default" type="submit">提交</button>
					</div>
				</div>
			</form>
		</div>
	</body>
</html>
